{% extends 'base.html' %}
{% load staticfiles %}
{% block css %}
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'plugins/datatable/css/dataTables.bootstrap.min.css' %}">
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/datatable/js/jquery.dataTables.js' %}"></script>
    <script src="{% static 'plugins/datatable/js/dataTables.bootstrap.min.js' %}"></script>
    <script>
        $(function () {
            csrf_token ="{% csrf_token %}";
            // datatable js 配置
            var dom = '<"col-xs-6 left-col-side"<"toolbar">><"col-xs-6 right-col-side"f>t' +
                '<"col-xs-6 left-col-side"l><"col-xs-6 right-col-side"p>r';
            var tb_user = $('#tb_user').DataTable({
                "dom": dom,
                "autoWidth": true,
                "searching": true,
                "columnDefs": [
                ],
                "language": {
                    "lengthMenu": "每页 _MENU_ 条记录",
                    "zeroRecords": "没有找到记录",
                    "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                    "infoEmpty": "无记录",
                    "infoFiltered": "(从 _MAX_ 条记录过滤)",
                    "paginate": {
                        "next": "下一页",
                        "previous": "上一页",
                        "first": "首页",
                        "last": "尾页"
                    }
                }
            });
            function re_data(data,csrf_token){
                res_data={
                    'csrftoken':csrf_token,
                    'data':data
                };
                return res_data
            }
            var toolstr = "<button type='button' class='btn btn-primary btn-sm user-out'>" +
                "用户导出</button>";
            $("div.toolbar").html(toolstr);
            // datatable js end
            // 绑定事件
            initdata();
            $("#tb_user").on('draw.dt', function () {
                initdata();
            });
            $('.user-out').on('click', function () {
                not_out= [];
                check = $('.check');
                for(var i=0;i<check.length;i++){
                    if(check[i].value==='0'){
                        not_out.push($(check[i]).attr('data-id'))
                    }
                }
                window.location.href = "{% url 'userapp:out_xls' %}"+'?not_out='+not_out
            });
            $('.check').on('click', function () {
                isout = $(this).val();
                if(isout==='1'){
                     $(this).parent().siblings('span').html('否');
                     $(this).val('0');
                }else{
                     $(this).parent().siblings('span').html('是');
                     $(this).val('1');
                }

            });
        });

        function initdata() {
{#            $('.user-payment').on('click', function () {#}
{#                var user_id = $(this).data('user');#}
{#                window.location.href = "{% url 'userapp:user_payment' %}?id=" + user_id;#}
{#            })#}
{#            $('.user-edit').on('click', function () {#}
{#                var user_id = $(this).data('user');#}
{#                window.location.href = "{% url 'userapp:user_form' %}?id=" + user_id;#}
{#            })#}
{#            $('.user-remove').on('click', function () {#}
{#                var user_id = $(this).data('user');#}
{#                layer.confirm('您确认要删除此用户吗？', {icon: 3}, function () {#}
{#                    $.post("{% url 'userapp:user_remove' %}", {'id': user_id}, function (ret) {#}
{#                        if (ret.status == 1) {#}
{#                            layer.msg('删除成功！');#}
{#                            window.location.reload();#}
{#                        } else {#}
{#                            layer.alert(ret.msg, {icon: 2})#}
{#                        }#}
{#                    }, 'json');#}
{#                })#}
{#            });#}
        }
    </script>
{% endblock %}
{% block content %}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                用户车辆管理
            </h1>
            <ol class="breadcrumb">
                <li><i class="fa fa-dashboard"></i> 用户车辆管理</li>
                <li class="active">用户列表</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">用户列表(当前有效注册用户：{{ is_active_count }}位)</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div><!-- /.box-tools -->
                </div><!-- /.box-header -->
                <div class="box-body">
                    <table id="tb_user" class="table table-hover table-bordered">
                        <thead>
                        <th>序号</th>
                        <th>导出</th>
                        <th>用户姓名</th>
                        <th>车牌号</th>
                        <th>手机</th>
                        <th>是否VIP</th>
                        <th>地址</th>
                        <th>注册时间</th>
                        <th>有效期截止时间</th>
                        </thead>
                        <tbody>
                        {% for user in user_list %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td><label class="checkbox inline">
                                  <input type="checkbox" id="inlineCheckbox1" value="1" checked class="check" data-id = {{ user.id }}>
                                </label><span>是</span></td>
                                <td>{{ user.name }}</td>
                                <td>{{ user.car_number }}</td>
                                <td>{{ user.phone }}</td>
                                <td>{% if user.vip %} 是 {% else %} 否 {% endif %}</td>
                                <td>{{ user.address }}</td>
                                <td>{{ user.create_at|date:'Y-m-d h:i a' }}</td>
                                <td>{{ user.expire_at|date:'Y-m-d h:i a' }}</td>

                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </section>
        <!-- /.content -->
    </div>
{% endblock %}